﻿@{
    ViewData["Title"] = "商品详情";
}
@{
    var product = ViewData["Product"] as Product;
    var productConfigList = ViewData["ProductConfigList"] as List<ProductConfig>;
}
<div class="">
    <form method="post" id="detailForm">
        <input type="hidden" name="productId" value="@(product.Id)" />
        <input type="hidden" name="color" id="color" value="" />
        <input type="hidden" name="size" id="size" value="" />
        <!-- quick view start -->
        <div class="container">
            <div class="row">
                <div id="view-gallery">
                    <div class="col-xs-12">
                        <div class="d-table" style="width:100%">
                            <div class="d-tablecell">
                                <div class="main-view modal-content">
                                    <div class="row">
                                        <div class="col-xs-12 col-sm-5">
                                            <div class="quick-image">
                                                <div class="single-quick-image tab-content text-center">
                                                    @{
                                                        var productConfigImages = productConfigList.Where(r => r.ConfigType == "Image").ToList();
                                                        for (int i = 0; i < productConfigImages.Count; i++)
                                                        {
                                                            var productConfigImage = productConfigImages[i];
                                                            <div class="tab-pane  fade in @(i==0?"active":"")" id="sin-pro-@(i)">
                                                                <img src="@(productConfigImage.ConfigValue)" alt="">
                                                            </div>
                                                        }
                                                    }
                                                </div>
                                                <div class="quick-thumb">
                                                    <div class="nav nav-tabs">
                                                        <ul style="padding-left:0px;">
                                                            @{
                                                                for (int i = 0; i < productConfigImages.Count; i++)
                                                                {
                                                                    var productConfigImage = productConfigImages[i];
                                                                    <li><a data-toggle="tab" href="##" onclick="javascript:tabProductImage('sin-pro-@(i)',this);"> <img src="@(productConfigImage.ConfigName)" alt="quick view" style="width:90px;height:90px;"> </a></li>
                                                                }
                                                            }
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xs-12 col-sm-7">
                                            <div class="quick-right">
                                                <div class="quick-right-text">
                                                    <h3><strong>@product.Name</strong></h3>
                                                    <div class="rating">
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star-half-o"></i>
                                                        <i class="fa fa-star-o"></i>
                                                    </div>
                                                    <div class="amount">
                                                        <h4>$@product.PreferentialPrice</h4>
                                                    </div>
                                                    <p>@product.Description</p>
                                                    <div class="row m-p-b">
                                                        <div class="col-sm-12">
                                                            <div class="por-dse responsive-strok clearfix">
                                                                <ul>
                                                                    <li><span>是否现货</span><strong>:</strong> 现货</li>
                                                                    <li><span>是否新品</span><strong>:</strong> 新品</li>
                                                                    <li>
                                                                        <span>商品类型</span><strong>:</strong>
                                                                        <a href="">@product.BasicStyle</a>
                                                                        <a href="">@product.ProductStyle</a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row m-p-b">
                                                        <div class="col-sm-12">
                                                            <div class="por-dse color">
                                                                <ul>
                                                                    <li>
                                                                        <span>颜色分类</span><strong>:</strong>
                                                                        <div class="por-dsc-div">
                                                                            @{
                                                                                var productColors = productConfigList.Where(r => r.ConfigType == "Color").ToList();
                                                                                for (int i = 0; i < productColors.Count; i++)
                                                                                {
                                                                                    <span class="por-dsc-span" onclick="javascript:checkActive(this,'color');">@(productColors[i].ConfigValue)</span>
                                                                                }
                                                                            }
                                                                        </div>
                                                                    </li>
                                                                    <li>
                                                                        <span>大小</span><strong>:</strong>
                                                                        <div class="por-dsc-div">
                                                                            @{
                                                                                var productSizes = productConfigList.Where(r => r.ConfigType == "Size").ToList();
                                                                                for (int i = 0; i < productSizes.Count; i++)
                                                                                {
                                                                                    <span class="por-dsc-span" onclick="javascript:checkActive(this,'size');">@(productSizes[i].ConfigValue)</span>
                                                                                }
                                                                            }
                                                                        </div>
                                                                    </li>
                                                                    <li>
                                                                        <span>标签</span><strong>:</strong>
                                                                        <a href="">@product.BasicStyle</a>
                                                                        <a href="">@product.ProductStyle</a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="dse-btn">
                                                        <div class="row">
                                                            <div class="col-sm-12 col-md-12">
                                                                <div class="por-dse clearfix">
                                                                    <ul>
                                                                        <li class="share-btn clearfix">
                                                                            <span>数量</span>
                                                                            <input class="input-text qty" name="quantity" maxlength="12" value="1" title="数量" type="text">
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                            <div class="col-sm-12 col-md-12">
                                                                <div class="por-dse add-to" style="display:inline-block">
                                                                    <a href="##" onclick="javascript:addCartByForm();">加入购物车</a>
                                                                </div>
                                                                <div class="por-dse add-to" style="display:inline-block">
                                                                    <a href="##" onclick="javascript:addPurchaseByForm();">立即购买</a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- quick view end -->
    </form>
</div>
<script src="~/js/shop.js"></script>